<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <title>手机号码验证</title>
    <link rel="stylesheet" type="text/css" href="public/css/style.css">
    <link rel="stylesheet" type="text/css" href="public/weui/css/weui.min.css">
    <link rel="stylesheet" type="text/css" href="public/weui/css/jquery-weui.css">
    <link rel="stylesheet" type="text/css" href="public/weui/css/demos.css">

</head>

<body ontouchstart>

<div class="weui-cells weui-cells_form">
    <h3 class="demos-title" style="margin-bottom:50px; margin-top:50px">手机号绑定</h3>
    <div class="weui-cell weui-cell_vcode weui-div-height">
        <div class="weui-cell__hd">
            <label class="weui-label">手机号</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="tel" id="tel" placeholder="请输入手机号">
        </div>
        <div class="weui-cell__ft weui-div-btn">
            <input style="width:92px;" type="button" class="weui-btn weui-btn_mini weui-btn_primary" value="获取验证码"
                   onclick="clickButton(this)" /></div>
        </div>
    </div>
    <div class="weui-cell weui-cell_vcode weui-div-height">
        <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input " type="number" id="code" placeholder="请输入验证码">
        </div>
    </div>
    <div class="weui-cell"></div>

    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
    </div>
</div>
<script type="text/javascript" src="public/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="public/js/common.js"></script>
<script type="text/javascript" src="public/js/wxconfig.js"></script>
<script type="text/javascript" src="public/weui/js/jquery-weui.js"></script>
<script type="text/javascript" src="public/js/redirectverify.js"></script>

<script type="text/javascript">
    $(function () {
        /**
         * 确定
         * */
        $("#showTooltips").click(function () {
            var tel = $('#tel').val();
            var code = $('#code').val();
            var data = {
                "userName":tel,
                "code":code
            }
            if (!tel || !/1[3|4|5|7|8]\d{9}/.test(tel)) $.toptip('请输入手机号');
            else if (!code || !/\d{6}/.test(code)) $.toptip('请输入六位手机验证码');
            else
                $.ajax({
                    url: requestPath + "/login/verifyCode",
                    type: "post",
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(data),
                    success: function (r) {
                        if (r.code == 200) {
                            $.toptip('绑定成功', 'success');
                            window.location.href = htmlPath + "/index.html";
                        }
                    }
                });
        });
    })
    /**
     * 获取验证码
     * */
    function clickButton(obj) {
        var tel = $('#tel').val();
        if (!tel || !/1[3|4|5|7|8]\d{9}/.test(tel)){
            $.toptip('请输入手机号')
            return;
        }
        var obj = $(obj);
        obj.attr("disabled", "disabled");
        /*按钮倒计时*/
        var time = 60;
        var set = setInterval(function () {
            obj.val(--time + "(s)");
        }, 1000);
        /*等待时间*/
        setTimeout(function () {
            obj.attr("disabled", false).val("重新获取");
            /*倒计时*/
            clearInterval(set);
        }, 60000);
        $.ajax({
            url: requestPath + "/login/getVerifyCode",
            type: "post",
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            data: tel,
            success: function (r) {
                if(r.code == 200){
                    $.toptip('获取成功', 'success');
                }else{
                    $.toast(r.msg+",获取失败", "cancel");
                }
            }
        });

    }

</script>
</body>
</html>
